<template>
    <div class="body">
        <!-- 广告位 start -->
        <div class="j_jypx_gg">
            <img src="../../assets/newimg/peixun/list_banner1.png" alt="" />
        </div>
        <!-- 广告位 end -->

        <!-- 导航 -->
        <div class="j_nav_peixun">
            <div :class="{ px_active: navType == 0 }" @click="changeNavpx(0)">
                <span>技能培训</span>
            </div>
            <div
                :class="{ px_active: navType == 1 }"
                @click="changeNavpx(1)"
                style="transform: rotateY(180deg)"
            >
                <span style="transform: rotateY(-180deg); display: block"
                    >学历提升</span
                >
            </div>
        </div>

        <!-- 技能培训 -->
        <dl class="j_pe_list" v-if="navType == 0">
            <dd>
                <div
                    class="j_pe_li"
                    v-for="(item, index) in peixuncalssList"
                    :key="index"
                    :class="{ j_pe_liactive: item.peixun_cate_id == cat_id }"
                    @click="getPeixundetialList(item.peixun_cate_id)"
                >
                    <p></p>
                    <span>{{ item.peixun_cate_name }}</span>
                </div>
            </dd>
            <dt>
                <div
                    class="j_pe_shli"
                    v-for="(item, index) in peixnShopList"
                    :key="index"
                    @click="
                        $router.push({
                            path: '/peixunDetial',
                            query: { id: item.peixun_id },
                        })
                    "
                >
                    <h3>
                        <img :src="item.peixun_img" alt="" />
                    </h3>
                    <h4>
                        <h1>{{ item.peixun_name }}</h1>
                        <h2>
                            <b>免费</b>
                            <i
                                >已有 <span>{{ item.view_num }}</span> 人观看</i
                            >
                        </h2>
                    </h4>
                </div>
            </dt>
        </dl>

        <!-- 学历提升 -->
        <div class="j_xueli_box" v-if="!navType == 0">
            <!-- 标题 -->
            <dl>
                <dd></dd>
                <dt>成人高考直招</dt>
            </dl>
            <!-- 内容 -->
            <ul>
                <li
                    v-for="(item, index) in educationInfo.data"
                    :key="index"
                    @click="
                        $router.push({
                            path: '/education',
                            query: { id: item.id },
                        })
                    "
                >
                    <h1>
                        <img
                            :src="item.image_link"
                            alt=""
                            @error="errorImage"
                        />
                    </h1>
                    <p>{{ item.name }}</p>
                </li>
            </ul>
        </div>

        <!-- 分页 -->
        <component
            :is="'Pagination'"
            v-if="!navType == 0"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            peixuncalssList: [],
            cat_id: '',
            peixnShopList: [],

            navType: 0,

            // 弹窗相关
            propsTwoKey: false,
            propsTwoId: '',
            ischeckCity: false,
            addResval: '',
            tieleVal: '',
            propTwoInfo: {
                true_name: '',
                mobile: '',
                province: '',
                city: '',
                district: '',
            },

            educationInfo: {
                data: [],
            },

            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.getPeixunclass();
    },
    methods: {
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getEducation(data); // 根据type获取订单
        },
        // 获取学历提升
        getEducation(page = 1, page_size = 10) {
            axiosPost(
                '/api/education/lists',
                {
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (res.data.current_page == res.data.last_page) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.data.forEach((element) => {
                        this.educationInfo.data.push(element);
                    });

                    this.educationInfo.current_page = res.data.current_page;
                    this.educationInfo.last_page = res.data.last_page;
                }
            );
        },
        // 切换培训类型
        changeNavpx(type) {
            this.navType = type;
            if (type == 1) {
                // 获取学历提升列表
                this.educationInfo.data = [];
                this.pageInfo.pageSatus = false;
                this.getEducation();
            }
        },
        // 获取培训分类列表
        getPeixunclass() {
            axiosPost('/api/peixun/category', {}, (res) => {
                // console.log(res);
                this.peixuncalssList = res.data;
                if (this.peixuncalssList.length > 0) {
                    this.getPeixundetialList(
                        this.peixuncalssList[0].peixun_cate_id
                    );
                }
            });
        },
        // 获取培训商品列表
        getPeixundetialList(peixun_cate_id) {
            this.cat_id = peixun_cate_id;
            this.getShoplist();
        },
        // 商品列表
        getShoplist(page = 0, page_size = 20) {
            axiosPost(
                '/api/peixun/lists',
                {
                    page: page,
                    page_size: page_size,
                    cat_id: this.cat_id,
                },
                (res) => {
                    // console.log(res);
                    this.peixnShopList = res.data.data;
                }
            );
        },
    },
};
</script>
<style lang="less" scope src="../../assets/css/proposTwo.less"></style>
<style lang="less" scope>
.j_jypx_gg {
    width: 15.1467rem;
    border-radius: 0.4267rem;
    overflow: hidden;
    margin: 0 auto 0.64rem;
    img {
        width: 100%;
    }
}

.j_pe_list {
    width: 15.1467rem;
    overflow: hidden;
    margin: 0 auto 0.64rem;
    display: flex;
    justify-content: space-between;

    dd {
        width: 4.352rem;
        .j_pe_liactive {
            span {
                color: #fe333d;
            }

            p {
                background: #fe333d;
            }
        }
    }

    .j_pe_li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 1.0667rem;
        margin-bottom: 1.0667rem;

        p {
            width: 0.1707rem;
            height: 0.5973rem;
            background: transparent;
        }

        span {
            font-size: 0.64rem;
            font-weight: 500;
            color: #666666;
            margin-left: 0.2773rem;
        }
    }

    dt {
        width: 11.2213rem;
        border-radius: 0.4267rem;
        overflow: hidden;
        background: #fff;
        padding: 0.63rem 0.63rem 0 0.63rem;

        .j_pe_shli {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.8533rem;

            h3 {
                width: 4.2667rem;
                height: 2.6667rem;
                border-radius: 0.2133rem;
                overflow: hidden;
                background: rgba(0, 0, 0, 0.1);

                img {
                    width: 100%;
                }
            }

            h4 {
                width: 4.7787rem;

                h1 {
                    font-size: 0.5973rem;
                    font-weight: 600;
                    color: #000000;
                    margin-bottom: 0.469rem;
                    display: block;
                    height: 1.5947rem;
                    line-height: 0.768rem;
                }

                h2 {
                    b {
                        font-size: 0.4693rem;
                        font-weight: 400;
                        color: #fe333d;
                        margin-right: 0.3rem;
                    }

                    i {
                        font-size: 0.4693rem;
                        font-weight: 400;
                        color: #858585;
                        span {
                            font-size: 0.4693rem;
                            font-weight: 400;
                            color: #fe333d;
                        }
                    }
                }
            }
        }
    }
}

// 导航
.j_nav_peixun {
    width: 15.1467rem;
    height: 1.7067rem;
    background: #fd7779;
    border-radius: 0.4267rem;
    margin: 0.64rem auto;

    display: flex;

    div {
        flex: 1;
        height: 1.7067rem;
        line-height: 1.7067rem;
        text-align: center;

        font-size: 0.64rem;
        font-weight: 500;
        color: #ffffff;
    }

    .px_active {
        background: url('../../assets/newimg/peixun/list_img_btbj.png') center
            center no-repeat;
        background-size: 100% 100%;
        color: #fd7779;
    }
}

// 学历
.j_xueli_box {
    width: 15.1467rem;
    min-height: 1.7067rem;
    background: #fff;
    border-radius: 0.4267rem;
    margin: 0.64rem auto;

    dl {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.64rem 0.64rem 0.4rem;

        dd {
            width: 0.1707rem;
            height: 0.5973rem;
            background: #fe333d;
        }
        dt {
            font-size: 0.64rem;
            font-weight: 500;
            color: #fe333d;
            margin-left: 0.2773rem;
        }
    }

    ul {
        padding: 0 0.32rem 0.32rem;
        overflow: hidden;

        li {
            width: 4.16rem;
            height: 4.8rem;
            background: #ffffff;
            border: 2px solid #eeeeee;
            border-radius: 0.4267rem;
            margin: 0.32rem;
            float: left;

            h1 {
                width: 2.7733rem;
                height: 2.6667rem;
                border-radius: 50%;
                overflow: hidden;
                margin: 0.64rem auto 0.4rem;

                img {
                    height: 100%;
                }
            }

            p {
                font-size: 0.4693rem;
                font-weight: 500;
                color: #000000;
                text-align: center;
            }
        }
    }
}
</style>
